<template>
  <div class="img">
    <div class="link" @click="show=true;searchHandle()">图片列表</div>
    <el-dialog title="图片列表" width="1200px" :visible.sync="show" class="list">
      <ul class="body after" v-if="list.img_list.length">
        <li v-for="(item,index) in list.img_list" :key="index">
          <a
            :href="item.path"
            class="img"
            target="_blank"
            :style="{backgroundImage:'url('+item.path+')'}"
          ></a>
          <div class="title">{{item.title}}</div>
          <div class="del" @click="del(item,index)" v-if="user.type==0 || user.type==1">
            <i class="fa fa-trash-o"></i>
          </div>
        </li>
      </ul>
      <empty v-else info="暂时没有数据"></empty>
      <div slot="footer" class="dialog-footer" v-if="user.type==0 || user.type==1">
        <uploads @file="upload" :data="{'compress':1}"></uploads>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import uploads from "@/components/other/uploads.vue";
export default {
  components: {
    uploads
  },
  data() {
    return {
      list: { img_list: [] },
      show: false,
      user:this.$store.state.user
    };
  },
  props: ["item"],
  methods: {
    // 更新
    save() {
      var data = { ...this.list };
      data["T"] = "toilet";
      data["img_list"] = JSON.stringify(data.img_list);
      this.item.img_list = JSON.stringify(this.list.img_list);
      this.axios.post("/admin/Index/handle", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.common.message({ message: ref.info });
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    },
    // 删除
    del(item, index) {
      this.common.confirm().then(() => {
        var list = this.list.img_list,
          data = {
            path: item.path
          };
        list.splice(index, 1);
        this.axios.post("/admin/Index/del_file", data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            this.save();
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 上传
    upload(file) {
      var list = this.list;
      file.list = file.list.reverse();
      file.list.forEach(v => {
        list.img_list.unshift({ title: v.title, path: v.path });
      });
      this.save();
    },
    searchHandle() {
      var data = {
        id: this.item.id
      };
      this.axios.post("/admin/Index/search_toilet", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data[0];
          if (!data.img_list) {
            data.img_list = [];
          } else {
            data.img_list = JSON.parse(data.img_list);
          }
          this.list = data;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    }
  }
};
</script>
<style scoped>
.img .list li {
  position: relative;
  width: calc(20% - 8px);
  float: left;
  margin-right: 10px;
}
.img .list li:nth-of-type(5n) {
  margin-right: 0;
}
.img .list li .img {
  display: block;
  padding-top: 70%;
  height: 0;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  cursor: pointer;
}
.img .list li .title {
  text-align: center;
  line-height: 40px;
}
.img .list li .del {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.img .list >>> .el-dialog__footer {
  border-top: 1px solid #eee;
  padding: 10px;
}
</style>